<!--
 * @Description: 事件等级展示
 * @Author: JiangMing
 * @Date: 2021-09-2 16:04:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-2 16:04:00
-->
<template>
  <text class="event-level" :class="[`lv${level}`]">
    {{ levels[level] }}
  </text>
</template>

<script>
export default {
  props: {
    level: {
      type: [Number, String]
    }
  },
  data() {
    return {
      levels: {
        1: '一般',
        2: '较大',
        3: '重大',
        4: '特别重大'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.event-level {
  display: inline-block;
  width: 154rpx;
  height: 35rpx;
  text-align: center;
  padding-left: 40rpx;
  line-height: 35rpx;
  color: #fff;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 24rpx;
  &.lv1 {
    background: url('@/static/images/level1_bg.png') center center no-repeat;
    background-size: 162rpx;
  }
  &.lv2 {
    background: url('@/static/images/level2_bg.png') center center no-repeat;
    background-size: 162rpx;
  }
  &.lv3 {
    background: url('@/static/images/level3_bg.png') center center no-repeat;
    background-size: 162rpx;
  }
  &.lv4 {
    background: url('@/static/images/level4_bg.png') center center no-repeat;
    background-size: 162rpx;
  }
}
</style>